<template>
  <div class="ChannelContainer">
    <!-- 头部容器 -->
    <div class="headerContainer">
      <van-sticky>
        <!-- 第一排logo和搜索 -->
        <div class="one">
          <div class="logo">网易严选</div>
          <div @click="toSearch" class="input">
            <van-icon size="20" class="search" name="search" />
            <!-- <div class="search" icon="search"></div> -->
            <div class="text">搜索商品,共105871款好物</div>
          </div>
          <!-- <div v-if="!isLogin" class="login" @click="toLogin">登录</div> -->
          <div class="login" @click="toLogin" v-show="!userInfo.id">登录</div>
          <div class="login" @click="exitLogin" v-show="userInfo.id">退出</div>
        </div>
        <!-- 第二排tab栏 -->
        <div class="two">
          <!-- tab栏容器 -->
          <div class="tab">
            <!-- tab栏 -->
            <van-tabs
              v-model="active"
              @click="hanlderTab()"
              class="tabContainer"
            >
              <van-tab title="推荐"></van-tab>
              <van-tab
                v-for="item in categoryList"
                :title="item.name"
                :key="item.id"
                :id="item.id"
              >
              </van-tab>
            </van-tabs>
            <!-- 右侧点击下拉按钮 -->
            <div class="toBottomTab">
              <!-- 按钮 -->
              <!-- <van-button type="primary" text="显示" @click="show = true" /> -->
              <van-icon
                class="toBottom"
                name="arrow-down"
                @click="show = true"
              />
              <!-- 蒙版容器 -->
              <van-overlay z-index="100" :show="show" @click="show = false">
                <!-- 下拉后的tab栏 -->
                <div class="wrapper" @click="show = false">
                  <!-- 蒙版头部 -->
                  <div class="one">
                    <div class="logo">网易严选</div>
                    <div class="input">
                      <van-icon size="20" class="search" name="search" />
                      <!-- <div class="search" icon="search"></div> -->
                      <div class="text">搜索商品,共105871款好物</div>
                    </div>
                    <div class="login" @click="toLogin" v-show="!userInfo.id">
                      登录
                    </div>
                    <div class="login" @click="exitLogin" v-show="userInfo.id">
                      退出
                    </div>
                  </div>
                  <!-- 蒙版内容区 -->
                  <div class="block">
                    <div class="header">
                      <div>全部频道</div>
                      <van-icon class="icon" name="arrow-up" />
                    </div>
                    <ul class="bottom">
                      <li>推荐</li>
                      <li>居家生活</li>
                      <li>宠物生活</li>
                      <li>服饰鞋包</li>
                      <li>美食酒水</li>
                      <li>个护清洁</li>
                      <li>母婴亲子</li>
                      <li>运动旅行</li>
                      <li>数码家电</li>
                      <li>严选全球</li>
                    </ul>
                  </div>
                </div>
              </van-overlay>
            </div>
          </div>
        </div>
      </van-sticky>
    </div>
  </div>
</template>

<script>
import { reqHomeRecommend, reqHomeOther } from "@/api";
import { mapState } from "vuex";
import { Dialog } from "vant";

export default {
  name: "tab",
  data() {
    return {
      show: false, //蒙版现隐
      tabList: [], //其他频道列表数据
      active: 0, //被选中的索引
      categoryList: {}, //其他频道信息
      isLogin: false, //是否登录
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  methods: {
    //   去登陆
    toLogin() {
      this.$router.push({
        path: "/login",
      });
    },
    // 切换tab栏的回调
    hanlderTab(event) {
      //如果点击是推荐
      if (this.active == 0) {
        this.$router.push({
          path: "/home",
        });
        localStorage.setItem("active", JSON.stringify(0));
        return;
      }
      // 保存active
      localStorage.setItem("active", JSON.stringify(this.active));
      // 如果点击是其他频道
      // console.log(this.categoryList[this.active - 1].id);
      let cannelId = this.categoryList[this.active - 1].id;
      this.$store.dispatch("getChannelList", cannelId);
      this.$router.push({
        path: "/channel?id=" + cannelId,
      });
      // console.log();
      // this.active = this.$props.newActive;
    },
    //点击搜索的回调
    toSearch() {
      this.$router.push({
        path: "/search",
      });
    },
    //获取首页数据
    async reqRecommend() {
      let result = await reqHomeRecommend();
      this.tabList = result.data.data.kingKongList;
      // console.log(result.data.data);
    },
    //获取其他频道列表
    async getHomeOther() {
      let result = await reqHomeOther(1005000);
      this.categoryList = result.data.categoryList;
      // console.log(this.categoryList);
      // console.log(this.$router);
    },
    // 退出登录
    exitLogin() {
      Dialog.confirm({
        message: "确定退出登录吗？",
      })
        .then(async () => {
          // 联系服务器退出登录
          await this.$store.dispatch("userLogout");
          // 若退出登录成功，则打回登录
          this.$router.push("/login");
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  mounted() {
    //获取首页数据
    this.reqRecommend();
    //获取其他频道列表
    this.getHomeOther();
    //从本地存储中拿出最新active
    let result = JSON.parse(localStorage.getItem("active"));
    this.active = result * 1;
    // 通过token判断用户是否登录;
    let token = localStorage.getItem("token");
    if (token) {
      this.isLogin = true;
    }
  },
};
</script>

<style lang="less" scoped>
//头部容器
.ChannelContainer {
  .headerContainer {
    // background: #add0e9;
    // width: 100%;
    //logo和搜素框
    .one {
      display: flex;
      // width: 100%;
      background: #ffffff;
      padding: 10px;
      height: 30px;
      .logo {
        // background: #eeb564;
        font-size: 16px;
        // padding: 10px;
        letter-spacing: 2px;
        width: 26%;
        // margin-right: 10px;
        height: 30px;
        line-height: 30px;
      }
      .input {
        display: flex;
        justify-content: center;
        background: #ededed;
        height: 30px;
        width: 74%;
        border-radius: 5px;
        .search {
          // background: #3c61a0;
          height: 20px;
          margin-top: 5px;
          color: #999;
        }
        .text {
          margin-left: 5px;
          // background: #f1e2a4;
          font-size: 14px;
          text-align: center;
          height: 20px;
          margin-top: 5px;
          color: #999;
        }
      }
      .login {
        // background: #c0bbb1;
        font-size: 12px;
        width: 12%;
        height: 20px;
        text-align: center;
        border: 1px solid rgb(230, 71, 71);
        color: rgb(230, 71, 71);
        border-radius: 5px;
        margin-left: 10px;
        margin-top: 4px;
      }
    }
    //tab栏
    .two {
      height: 44px;
      .tab {
        display: flex;
        .tabContainer {
          width: 90%;
          .van-tabs__content {
            display: none;
          }
          .van-tab {
            margin-right: 20px;
            span {
              font-size: 12px;
            }
          }
        }
        .toBottomTab {
          width: 10%;
          // background: rgb(118, 185, 240);
          background: #ffffff;
          .wrapper {
            // display: flex;
            // align-items: center;
            // justify-content: center;
            padding-right: 10px;
            height: 100%;
            width: 375px;
          }
          // 蒙版内容区
          .block {
            width: 100%;
            // height: 186px;
            background-color: #fff;
            font-size: 14px;
            padding: 10px 0 10px 10px;
            // padding-top: 10px;
            // padding-left: 6px;
            //头部-全部频道和^
            .header {
              // width: 90%;
              height: 30px;
              display: flex;
              justify-content: space-between;
              // background: rgb(187, 247, 195);
              line-height: 30px;
              padding-right: 10px;
              div {
              }
              .icon {
                width: 30px;
                // background: rgb(107, 168, 248);
                font-size: 22px;
                color: #999;
              }
            }
            //分类列表
            .bottom {
              display: flex;
              flex-wrap: wrap;
              width: 100%;
              li {
                width: 75px;
                height: 28px;
                // background: rgb(128, 156, 187);
                margin: 10px 14px 10px 0;
                text-align: center;
                line-height: 28px;
                border: 1px solid #999;
                border-radius: 4px;
              }
            }
          }
          // 向下图标的样式
          .toBottom {
            width: 30px;
            height: 20px;
            // background: rgb(167, 243, 95);
            padding-top: 10px;
            padding-left: 6px;
            color: #999;
          }
        }
      }
    }
  }
}
</style>
